<template>
  <div id="footer" class="footer">
    <router-link
      :to="item.url"
      class="item"
      :class="{ on: item.url === $route.path }"
      v-for="(item, index) in footerList"
      :key="index"
    >
      <div
        class="iconfont user-icon"
        :class="item.icon1 + ' ' + (item.url === $route.path ? item.icon2 : '')"
      ></div>
      <div class="user-name">{{ item.name }}</div>
    </router-link>
  </div>
</template>

<script>
  export default {
    name: "UserFooter",
    data: function() {
      return{
        footerList: [
          {
            name: "接单大厅",
            icon1: "icon-jiedandating",
            icon2: "icon-jiedandating",
            url: "/hall"
          },
          {
            name: "订单中心",
            icon1: "icon-dingdanzhongxin",
            icon2: "icon-dingdanzhongxin",
            url: "/clerkorder"
          },
          {
            name: "我的",
            icon1: "icon-renyuan-copy",
            icon2: "icon-renyuan",
            url: "/clerk"
          },
        ]
      }
    }
  }
</script>

<style scoped lang="stylus">
  @import '~style/mixins.styl'
  @import '~style/varibles.styl'
  .footer
    position fixed
    bottom 0
    height 1.2rem
    background-color #fff
    between()
    width 100%
    border-top 1px solid #E3E3E3
    .item
      center()
      flex-direction column
      width calc(100% / 3)
      color #D8D8D8
      .user-icon
        center-align-items()
        height .6rem
        font-size .5rem
      .user-name
        center-align-items()
        height .5rem
    .on
      .user-icon
        center-align-items()
        height .6rem
        font-size .5rem
        color $DefaultColor
      .user-name
        center-align-items()
        height .5rem
        color $DefaultColor
</style>
